<template>
  <div class="key-echarts-container">
  </div>
</template>

<script>
export default {
  mounted() {
    const elMain = document.querySelector('.el-main')
    const container = document.querySelector('.key-echarts-container')
    container.style.height = elMain.offsetHeight - 20 + 'px'
    const myChart = this.$ecs.init(container)
    const xAxisData = []
    const data = []
    const data2 = []
    for (let i = 0; i < 50; i++) {
      xAxisData.push(i)
      data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
      data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
    }
    const option = {
      grid: {
        left: '5%',
        right: '5%'
      },
      xAxis: [{
        show: false,
        data: xAxisData
      }, {
        show: false,
        data: xAxisData
      }],
      visualMap: {
        show: false,
        min: 0,
        max: 50,
        dimension: 0,
        inRange: {
          color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
        }
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#4a657a'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#08263f'
          }
        },
        axisTick: {
          show: false
        }
      },
      series: [{
        name: 'back',
        type: 'bar',
        data: data2,
        z: 1,
        itemStyle: {
          normal: {
            opacity: 0.4,
            barBorderRadius: 5,
            shadowBlur: 3,
            shadowColor: '#111'
          }
        }
      }, {
        name: 'Simulate Shadow',
        type: 'line',
        data,
        z: 2,
        showSymbol: false,
        animationDelay: 0,
        animationEasing: 'linear',
        animationDuration: 1200,
        lineStyle: {
          normal: {
            color: 'transparent'
          }
        },
        areaStyle: {
          normal: {
            color: '#08263a',
            shadowBlur: 50,
            shadowColor: '#000'
          }
        }
      }, {
        name: 'front',
        type: 'bar',
        data,
        xAxisIndex: 1,
        z: 3,
        itemStyle: {
          normal: {
            barBorderRadius: 5
          }
        }
      }],
      animationEasing: 'elasticOut',
      animationEasingUpdate: 'elasticOut',
      animationDelay(idx) {
        return idx * 20
      },
      animationDelayUpdate(idx) {
        return idx * 20
      }
    }
    myChart.setOption(option)
    this.$resize(myChart)
  }
}
</script>

<style>
  .key-echarts-container {
    width: 100%;
    background-color: #08263a;
  }
</style>
